<script setup lang="ts">
import html2canvas from 'html2canvas'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'l', 'cm', [29.7, 21])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div id="page" class="page">
    <h2 style="font-family: '黑体';">附件3</h2>
    <div class="title">
      <p>2022—2023学年国家奖学金获奖学生初审名单表</p>
      <span class="top1" style="left: 2.8cm;">学校名称：</span>
      <span></span>
      <span class="top2" tyle="right: 5px;">填表日期：</span>
      <span></span>
    </div>
    <div class="kuang">
      <div class="center"><span>序号</span></div>
      <div class="center"><span>学生姓名</span></div>
      <div class="center"><span>身份证号码</span></div>
      <div class="center"><span>院系</span></div>
      <div class="center"><span>专业</span></div>
      <div class="center"><span>学号</span></div>
      <div class="center"><span>性别</span></div>
      <div class="center"><span>民族</span></div>
      <div class="center"><span>入学年月</span></div>
      <div class="center">
        <span>学生本人的花溪农商银行/贵州农信卡号</span>
      </div>
      <div class="center">
        <span>成绩排名总人数</span>
      </div>
      <div class="center">
        <span>成绩排名名次</span>
      </div>
      <div class="center">
        <span>必修课及格门数</span>
      </div>
      <div class="center">
        <span>必修课门数</span>
      </div>
      <div class="center">
        <span>是否实行综合考评排名（填写“是”或“否”）</span>
      </div>
      <div class="center">
        <span>综合考评排名名次</span>
      </div>
      <div class="center">
        <span>综合考评排名总人数</span>
      </div>
      <div class="center">
        <span>备注（学生成绩在10%—30%的特殊情形请在本栏注明）</span>
      </div>
      <div class="content red"><span>例</span></div>
      <div class="content red"><span>XXX</span></div>
      <div class="content red"><span>520XXXXXXXXXXXXXXX</span></div>
      <div class="content red"><span>人文科技学院文学与新闻传播</span></div>
      <div class="content red"><span>汉语言文学</span></div>
      <div class="content red"><span>XXXXXXXXXX</span></div>
      <div class="content red"><span>女</span></div>
      <div class="content red"><span>汉族</span></div>
      <div class="content red"><span>2019年9月</span></div>
      <div class="content red"><span></span></div>
      <div class="content red"><span>53</span></div>
      <div class="content red"><span>1</span></div>
      <div class="content red"><span>7</span></div>
      <div class="content red"><span>7</span></div>
      <div class="content red"><span>是</span></div>
      <div class="content red"><span>1</span></div>
      <div class="content red"><span>53</span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
    </div>
    <div class="bottom">
      <p>（注：此表供高校填写）</p>
      <div class="pai">
        <span class="xia1" style="left: 0cm;">经办人：</span>
        <span class="xia"></span>
        <span class="xia2" style="left: 4cm;">联系电话:</span>
        <span class="xia"></span>
        <span class="xia3" style="left: 8cm;">传真：</span>
        <span class="xia"></span>
        <span class="xia4" style="left: 11cm;">电子邮箱：</span>
        <span class="xia"></span>
      </div>
    </div>
    <div class="ye">
      <p>第1页，共1页</p>
    </div>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
}
div.page {
  width: 29.7cm;
  height: 21cm;
  padding:  2.6cm;
  margin: auto;
  position: relative;
  display: grid;
  grid-template-rows: 5% 10%  40% 10% 35%;
}
.title {
  text-align: center;
  font-family: '黑体';
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 15px;
}
span.top1,
span.top2 {
  position: absolute;
  font-family: '宋体';
  font-size: 8.8px;
  font-weight: 600;
}
div.kuang {
  display: grid;
  grid-template-columns: 2fr 3fr 5fr 3fr 3fr 3fr 2fr 2fr 4fr 3fr 2fr 2fr 2fr 2fr 3fr 2.5fr 2fr 4fr;
  grid-template-rows: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid black;
}
div.kuang div {
  border: 1px solid black;
}
div.center {
  display: grid;
  align-items: center;
  text-align: center;
  font-size: 9.6px;
  font-weight: 900;
  font-family: '宋体';
}
div.content{
  display: grid;
  align-items: center;
  text-align: center;
  font-size: 8.8px;
  font-family: '仿宋';
}
div.red {
  color: red;
}
div.bottom {
  position: relative;
  font-family: '宋体';
  font-size: 8.8px;
}
div.bottom p{
  font-weight: 900;
}
span.xia1,
span.xia2,
span.xia3,
span.xia4 {
  position: absolute;
}
div.ye {
  text-align: center;
  font-size: 9.6px;
  position: relative;
}
div.ye p{
  position: absolute;
  bottom: 0;
  left: 11cm;
}
</style>
